<template>
	<view class="content">
		<text class="txt">请选择</text>
		<view class="box">
			<view v-for="(item,index) in 10" :key="index" class="item" :class="index==current?'active':''"
				@click="check(index)">
				{{index+1+'分'}}
			</view>
		</view>
		<view class="btn-box">
			<u-button type="primary" @click="tijiao" text="确 定"></u-button>
		</view>
		<!-- <text>{{deviceId}}</text> -->
		<u-loading-page :loading="loading" loading-text="加载中..." color="#fff" bg-color="#92c7e8"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				deviceId: '',
				loading: false
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.deviceId)
					this.deviceId = res.deviceId
				}
			})
		},
		methods: {
			check(index) {
				this.current = index
			},
			tijiao() {
				this.loading = true
				uniCloud.callFunction({
					name: 'setfen',
					data: {
						id: uni.getStorageSync('dafenid') || '',
						deviceId: this.deviceId,
						fen: this.current + 1
					},
					success: (res) => {
						console.log(res)
						uni.showModal({
							content: res.result.msg,
							showCancel: false
						})
						/* if(res.result.status==0){
							
						} */
					},
					complete: () => {
						this.loading = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.txt {
		font-size: 48rpx;
		margin-bottom: 20rpx;
	}

	.item {
		height: 100rpx;
		background: $uni-color-success;
		display: grid;
		place-items: center;
		color: #fff;
		border-radius: 10rpx;
		transition: all 0.2s ease-out;
	}

	.item.active {
		background: $uni-color-error;
	}

	.btn-box {
		width: 100%;
		margin-top: 200rpx;
	}
</style>